<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" />
        <meta content="yes" name="apple-mobile-web-app-capable" />
        <meta content="yes" name="apple-touch-fullscreen" />
        <meta content="telephone=no" name="format-detection" />
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <title>xx</title>

        <link href="__PUBLIC__/css/layui.css" rel="stylesheet" type="text/css" media="all"/>
        <script type="text/javascript" src="__PUBLIC__/layui.js"></script>

        <link rel="stylesheet" href="__PUBLIC__/mobile/css/mlogin.min.css">
    </head>
    
    <body>
        <header id="header" style="display:block;">
            <a href="javascript:history.back();" <span class="icon icon-goback"></a>
            <span class="txt-header">
                预约定制
            </span>
        </header>
        <section class="page">
        <form class="layui-form" method="post">
            <div class="wrap loginPage">
                <div class="input-container">
                    <div class="txt-username">姓名：</div>
                    <input class="acc-input username txt-input J_ping" type="text" name="names" lay-verify="names" placeholder="请输入姓名" autocomplete="off">
                    <i class="icon icon-clear"></i>
                </div>
                <div class="input-container">
                    <div class="txt-password">手机：</div>
                    <input class="acc-input password txt-input J_ping" type="text" name="phone" placeholder="请输入联系人手机" autocomplete="off">
                    <i class="icon icon-clear"></i>
                </div>
                <div class="input-container">
                    <div class="txt-password">预算：</div>
                    <input class="acc-input password txt-input J_ping" type="text" name="budget" placeholder="请输入预算" autocomplete="off">
                    <i class="icon icon-clear"></i>
                </div>
                <div class="input-container">
                    <div class="txt-password">数量：</div>
                    <input class="acc-input password txt-input J_ping" type="text" name="num" placeholder="请输入数量" autocomplete="off">
                    <i class="icon icon-clear"></i>
                </div>
                <div class="input-container">
                    <div class="txt-username">QQ：</div>
                    <input class="acc-input username txt-input J_ping" type="text" name="qq" placeholder="请输入QQ号码" autocomplete="off">
                    <i class="icon icon-clear"></i>
                </div>
                <div class="input-container">
                    <div class="txt-username">地址：</div>
                    <input class="acc-input username txt-input J_ping" type="text" name="addr" placeholder="请输入详细地址" autocomplete="off">
                    <i class="icon icon-clear"></i>
                </div>
                <div>
                    <span style="position: absolute;left: 21px;">需求：</span>
                    <textarea name="content" cols="40" rows="3" placeholder="请输入需求描述" style="margin-left: 50px;"></textarea>
                </div>
                <div class="notice" style="text-align: center;"><span id="resinfo" style="font-size: 18px;"></span></div>
                <button lay-submit="" lay-filter="*" style="background-color: #EEEEEE;width: 100%;height: 46px;border:0px;">提交需求</button>
            </div>
        </form>
        </section>
<script type="text/javascript">
    layui.use(['form','layer'], function(){
       $ = layui.jquery;
      var layer = layui.layer
      ,form = layui.form();
      //layer.msg('Hello World');

      //交互
    form.on('submit(*)', function(data){
        $.ajax({
            url: "{:U('mobile/xuqiu/add')}",//请求地址
            type: "post",//请求方式
            dataType: "json",//返回数据类型
            data: data.field,//发送的参数
            })
            .done(function(response) {
                  if(response.error==0){
                     layer.msg(response.info ,{icon:5});
                  }else{
                     //layer.msg(response.info ,{icon:6});
                     $("#resinfo").html(response.info);
                  }
              })
            .fail(function() {
                alert("ajxs交互失败");
            })  

          return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });   
    });

</script>
    </body>
</html>